import { connect, history } from 'umi'
import React, { useRef, useState, useEffect } from 'react';
import TableDataBlock from '@/components/TableDataBlock';
import { Switch, Row, Col, Space } from 'antd'
import PopImgShow from '@/components/PopImgShow';
import FormSet from './components/FormSet'
import UpdateAdmin from './components/UpdateAdmin';
import { qaType_status } from '@/common/contact'
import './index.less'
const AnsweringAccount = (props) => {
    const { list = {}, dispatch } = props
    const { location = {} } = history
    const { query = {} } = location
    const { accessId } = query
    const [tagList, setTagList] = useState([])
    const [subjectList, setSubjectList] = useState([])
    const [visible, setVisible] = useState(false)
    const [visible1, setVisible1] = useState(false)
    const searchItems = [
        {
            label: '老师',
            name: 'keyword',
        },
        {
            label: '学科',
            name: 'subjectIds',
            type: 'select',
            type: 'multiple',
            fieldNames: {
                label: 'subjectName',
                value: 'id'
            },
            select: subjectList
        },
        {
            label: '标签',
            name: 'tagIds',
            type: 'multiple',
            fieldNames: {
                label: 'tagName',
                value: 'id'
            },
            select: tagList
        },
        {
            label: '状态',
            name: 'status',
            type: 'select',
            select: {
                0: '已下架',
                1: '已上架',
            },
        },
    ];
    const btnExtra = [
        {
            text: '新增',
            onClick: () => {
                setVisible({
                    show: true
                })
            }
        }
    ]
    const handleCallback = () => {
        childRef.current.reloadData();
    };
    const handleReload = () => {
        childRef.current.fetchGetData();
    };
    const fetchSearchList = () => {
        dispatch({
            type: 'answering/fetchListSubject',
            callback: (e) => {
                setSubjectList(e)
            }
        })
        dispatch({
            type: 'answering/fetchListTeacherTag',
            callback: (e) => {
                setTagList(e)
            }
        })
    }
    useEffect(() => {
        fetchSearchList()
    }, [])
    const childRef = useRef();
    // table 表头
    const getColumns = [
        {
            title: '头像',
            dataIndex: 'profile',
            render: (e) => {
                return <PopImgShow url={e}></PopImgShow>
            }
        },

        {
            title: '员工姓名',
            dataIndex: 'adminName',
        },
        {
            title: '老师姓名',
            dataIndex: 'teacherName',
        },
        {
            title: '手机号码',
            dataIndex: 'adminMobile',
        },
        {
            title: '学科',
            dataIndex: 'subjectNames',
        },
        {
            title: '状态',
            dataIndex: 'status',
            render: (e, record) => {
                return <Switch onChange={(val) => {
                    dispatch({
                        type: 'answering/fakeSaveTeacher',
                        payload: {
                            status: val ? '1' : '0',
                            id: record.id
                        },
                        callback: () => {
                            handleCallback()
                        }
                    })
                    console.log(e)
                }} checked={e === '1'}></Switch >
            }
        },
        {
            type: 'handle',
            width: 200,
            dataIndex: 'id',
            render: (val, record) => [
                {
                    auth: true,
                    title: '编辑',
                    type: 'edit',
                    click: () => {
                        const { subjectIds = '', tagIds = '', recommendedHomeRecruitment, recommendedHomeTeacher } = record
                        setVisible({
                            show: true,
                            detail: {
                                ...record,
                                recommendedHomeRecruitment: recommendedHomeRecruitment === '1' ? true : false,
                                recommendedHomeTeacher: recommendedHomeTeacher === '1' ? true : false,
                                subjectIds: subjectIds.length ? subjectIds.split(',').map(val => { return Number(val) }) : [],
                                tagIds: tagIds.length ? tagIds.split(',').map(val => { return Number(val) }) : []
                            }
                        })
                    },
                },
                {
                    auth: true,
                    title: '设置绑定员工',
                    type: 'edit',
                    click: () => {
                        setVisible1({
                            show: true,
                            detail: record
                        })
                    },
                },
                {
                    auth: true,
                    title: '老师详情',
                    click: () => {
                        history.push({
                            pathname: '/answeringModule/answeringAccountDetail',
                            query: {
                                id: record.id,
                                accessId
                            }
                        })
                    },
                },
            ],
        },
    ];
    return <div>
        <TableDataBlock
            cRef={childRef}
            btnExtra={btnExtra}
            searchItems={searchItems}
            columns={getColumns}
            rowKey={(record) => `${record.id}`}
            dispatchType="answering/fetchListTeacher"
            {...list}
        ></TableDataBlock>
        <FormSet
            tagList={tagList}
            subjectList={subjectList}
            handleCallback={handleReload}
            visible={visible}
            onClose={() => { setVisible(false) }}
        ></FormSet>

        <UpdateAdmin
            tagList={tagList}
            subjectList={subjectList}
            handleCallback={handleReload}
            visible={visible1}
            onClose={() => { setVisible1(false) }}
        ></UpdateAdmin>
    </div>
}

export default connect(({ loading, answering }) => ({
    list: answering.teacherList,
    loading: loading.effects['answering/fetchListTeacher'],
}))(AnsweringAccount);
